<template>
  <div class="counters-tree_vue">
<!--    <div class="tree" id="tree">{{treeHtml}}</div>-->
<!--    <div class="tree" id="tree">{{getTree()}}</div>-->
    <div class="tree">
      <details v-for="(item,index) in treeData" :key="index">
        <summary>
          <span :title="item.name" :data-id="item.id">{{item.name}}</span>
        </summary>
        <template v-if="item.children && item.children?.length > 0" >
          <CountersTree />
        </template>
      </details>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";

const treeHtml = ref('')
const treeData = [
  {
    "id": 2,
    "name": "项目1",
    "parentId": 1,
    "fileCount": 14,
    "children": [
      {
        "id": 8,
        "name": "文件夹",
        "parentId": 2,
        "fileCount": 12,
        "children": [
          {
            "id": 137,
            "name": "sdd",
            "parentId": 8,
            "fileCount": 0
          }
        ]
      },
      {
        "id": 221,
        "name": "chrome test",
        "parentId": 2,
        "fileCount": 2
      }
    ]
  },
  {
    "id": 52,
    "name": "项目2",
    "parentId": 1,
    "fileCount": 10,
    "children": [
      {
        "id": 54,
        "name": "文件夹2-1",
        "parentId": 52,
        "fileCount": 10,
        "children": [
          {
            "id": 55,
            "name": "文件夹2-1-1",
            "parentId": 54,
            "fileCount": 0,
            "children": [
              {
                "id": 56,
                "name": "文件夹2-1-1-1",
                "parentId": 55,
                "fileCount": 0,
                "children": [
                  {
                    "id": 57,
                    "name": "文件夹2-1-1-1-1",
                    "parentId": 56,
                    "fileCount": 0,
                    "children": [
                      {
                        "id": 58,
                        "name": "文件夹2-1-1-1-1-1",
                        "parentId": 57,
                        "fileCount": 0
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    "id": 53,
    "name": "文件夹1",
    "parentId": 1,
    "fileCount": 12,
    "children": [
      {
        "id": 80,
        "name": "文件夹",
        "parentId": 53,
        "fileCount": 11
      },
      {
        "id": 224,
        "name": "文件夹2",
        "parentId": 53,
        "fileCount": 0
      }
    ]
  },
  {
    "id": 69,
    "name": "项目3",
    "parentId": 1,
    "fileCount": 55,
    "children": [
      {
        "id": 70,
        "name": "文件夹1",
        "parentId": 69,
        "fileCount": 12,
        "children": [
          {
            "id": 4,
            "name": "1",
            "parentId": 70,
            "fileCount": 3,
            "children": [
              {
                "id": 51,
                "name": "文件夹2",
                "parentId": 4,
                "fileCount": 1
              }
            ]
          }
        ]
      },
      {
        "id": 91,
        "name": "文件夹",
        "parentId": 69,
        "fileCount": 10
      },
      {
        "id": 102,
        "name": "文件夹",
        "parentId": 69,
        "fileCount": 10
      },
      {
        "id": 113,
        "name": "文件夹",
        "parentId": 69,
        "fileCount": 10
      },
      {
        "id": 121,
        "name": "文件夹的副本",
        "parentId": 69,
        "fileCount": 10
      },
      {
        "id": 136,
        "name": "点点点",
        "parentId": 69,
        "fileCount": 0
      },
      {
        "id": 140,
        "name": "hewei",
        "parentId": 69,
        "fileCount": 3,
        "children": [
          {
            "id": 142,
            "name": "hewei02",
            "parentId": 140,
            "fileCount": 1
          }
        ]
      }
    ]
  }
]

const gen_tree = (chiLds) => {
  let html = ""
  chiLds.forEach((el,index)=>{

  })
}

const getTree = () => {
  let html = ""
  treeData.forEach((el,index)=>{
    html+='<details><summary><span>{{el.name}}</span>'
  })
}


onMounted(()=>{
  //treeHtml.value = gen_tree(treeData)
})
</script>

<style scoped lang="scss">
.counters-tree_vue {
  margin: 0;
  width: 100%;
  height: 35vh;
  //background-color: #d3d3d3;
  border: 1px solid red;
}

.tree{
  flex: 1;
  overflow: auto;
  padding: 4px 0;
  position: relative;
  width: 300px;
  height: 600px;
  max-height:100%;
}
.tree summary:not(:only-child)::before{
  background: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.354 2.646A.5.5 0 0 0 4.5 3v6a.5.5 0 0 0 .854.354l3-3a.5.5 0 0 0 0-.708l-3-3z' fill='%23000' fill-opacity='.45'/%3E%3C/svg%3E") right 2px center no-repeat;
}
.tree details[open]>summary:not(:only-child)::before{
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.354 5.354A.5.5 0 0 0 9 4.5H3a.5.5 0 0 0-.354.854l3 3a.5.5 0 0 0 .708 0l3-3z' fill='%23000' fill-opacity='.45'/%3E%3C/svg%3E");
}
.tree details{
  counter-reset: count -1;
}
.tree summary{
  outline: 0;
  display: flex;
  border-radius: 8px;
  cursor: default;
  padding-left: 10px;
  counter-increment: count;
}
.tree summary::before{
  content: counters(count,"");
  color: transparent;
  font-variant-numeric: tabular-nums;
  font-size: 24px;
}
.tree-item{
  display: flex;
  align-items: center;
  height: 46px;
  font-size: 15px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.85);
}
.tree summary:hover{
  background-color: #EEF2FF;
}
.tree-item::before{
  content: '';
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-right: 8px;
  background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M.833 3.75c0-.92.746-1.667 1.667-1.667h5.417c.247 0 .481.11.64.3l1.833 2.2h7.11c.92 0 1.667.747 1.667 1.667v10c0 .92-.747 1.667-1.667 1.667h-15c-.92 0-1.667-.746-1.667-1.667V3.75zm6.693 0H2.5v4.584h15V6.25H10a.833.833 0 0 1-.64-.3l-1.834-2.2zM17.5 10h-15v6.25h15V10z' fill='%23000' fill-opacity='.45'/%3E%3C/svg%3E") center no-repeat;
}
.tree details[open]>summary:not(:only-child)>.tree-item::before{
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.917 2.083c.247 0 .481.11.64.3l1.833 2.2h5.443c.92 0 1.667.747 1.667 1.667v1.667h.833a.833.833 0 0 1 .817.997l-1.666 8.333a.833.833 0 0 1-.817.67H1.677a.814.814 0 0 1-.157-.013.83.83 0 0 1-.687-.82V3.75c0-.92.746-1.667 1.667-1.667h5.417zM10 6.25a.833.833 0 0 1-.64-.3l-1.834-2.2H2.5v6.564l.441-1.766a.833.833 0 0 1 .809-.631h12.083V6.25H10zm-7.266 10L4.4 9.584h12.916l-1.334 6.666H2.733z' fill='%23000' fill-opacity='.45'/%3E%3C/svg%3E");
}
</style>
